<template>
  <div class="tmpl">
    <h1>EmployeeTable</h1>
    <div class="emp-table">
      <el-table :data="tableData" height="420" style="width:100%;">
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市区" width="120"></el-table-column>
        <el-table-column prop="position" label="职位" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editEmp(scope.row)">编辑</el-button>
            <el-button type="warning" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="editForm" class="editForm">
          <el-form-item label="编 号:" :label-width="formLabelWidth">
            <el-input v-model="editForm.id" style="width:90%;margin-left:10px" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓 名:" :label-width="formLabelWidth">
            <el-input v-model="editForm.name" style="width:90%;margin-left:10px"></el-input>
          </el-form-item>
          <el-form-item label="省 份:" :label-width="formLabelWidth">
            <el-input v-model="editForm.province" style="width:90%;margin-left:10px"></el-input>
          </el-form-item>
          <el-form-item label="职 位:" :label-width="formLabelWidth">
            <el-input v-model="editForm.position" style="width:90%;margin-left:10px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSubmit">确 定</el-button>
          <el-button @click="cancelSubmit">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmployeeTable',
  methods: {
    openDialog () {
      this.dialogFormVisible = true // 显示编辑弹框
    },
    closeDialog () {
      this.dialogFormVisible = false // 关闭编辑弹框
    },
    editEmp (row) {
      this.openDialog()
      let _row = row
      this.editForm = Object.assign({}, _row) // 编辑弹框的数据
    },
    cancelSubmit () {
      this.closeDialog()
      this.$message({
        type: 'info',
        message: '已取消编辑'
      })
    },
    editSubmit () {
      this.closeDialog()
      let id = this.editForm.id
      let name = this.editForm.name
      let province = this.editForm.province
      let position = this.editForm.position
      this.$message({
        type: 'success',
        message: `编辑成功！ id: ${id}, name: ${name}, province: ${province}, position: ${position}`
      })
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '75px',
      tableData: [
        { id: 1, name: '张小三', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路1518 弄', position: '项目经理', zip: 200333 },
        { id: 2, name: '李小四', province: '北京', city: '朝阳区', address: '北京市朝阳区公园南路甲2号', position: '前端开发', zip: 100026 },
        { id: 3, name: '王小五', province: '广州', city: '海珠区', address: ':广州市海珠区昌岗东路257号', position: '前端测试', zip: 323212 },
        { id: 4, name: '赵小六', province: '深圳', city: '南山区', address: '深圳市南山区高新科技园北区', position: '后端开发', zip: 873461 }
      ],
      editForm: {
        id: '',
        name: '',
        province: '',
        city: '',
        address: '',
        position: '',
        zip: ''
      }
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
.emp-table {
  background: #fff;
  width: 85%;
  height: 100%;
  padding: 30px 20px;
  margin: 0 30px 30px 0;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
}
</style>
